<template>
	<public-view navType="order" navTitle="添加新地址" topBgShow="4" :navRight="false" navColor="#ffffff">
		<view class="content flex f-d-c a-i-c">
			<view class="map-addresss flex f-d-c w-100">
				<map class="map-box" :latitude="lat" :longitude="lng" name=""></map>
				<view class="w-100 flex a-i-c j-c-b address-pick" @click="getChooseLocation">
					<view class="left f-s-28 flex a-i-c">
						<view class="title color-333">
							选择地区
						</view>
						<view class="color-7a7a7a">
							{{provinces.name ||'省'}}/{{city.name||"市"}}/{{area.name||"区"}}
						</view>
					</view>
					<image class="next-ic" src="@/static/images/next-icon3.svg" mode=""></image>
				</view>
			</view>
			<view class="address-form-box">
				<view class="title color-333 f-s-28">
					收件人
				</view>
				<input class="address-input f-s-28" placeholder="请输入收件人" v-model="name" type="text" placeholder-class="color-c2c2c2"/>
				<view class="title color-333 f-s-28">
					手机号
				</view>
				<input class="address-input f-s-28" placeholder="请输入手机号码" v-model="mobile" type="number" placeholder-class="color-c2c2c2"/>
				<view class="title color-333 f-s-28">
					详细地址
				</view>
				<input v-model="address_desc" class="address-input f-s-28" placeholder="请输入详细地址：街道、门牌号等" type="text" placeholder-class="color-c2c2c2"/>
			</view>
			<view class="tag-list-box flex a-i-c j-c-b w-100">
				<view class="item all-center" @click="flag = 'default'" :class="flag === 'default'?'active':'unactive'">
					默认
				</view>
				<view class="item all-center" @click="flag = 'home'" :class="flag === 'home'?'active':'unactive'">
					家
				</view>
				<view class="item all-center" @click="flag = 'company'"  :class="flag === 'company'?'active':'unactive'">
					公司
				</view>
			</view>
			<view class="save-address-btn all-center color-fff f-s-30" @click="postAddressAdd">
				保存
			</view>
			<address-popup ref="addressPopup" background="#EE8300" @addressBack="addressCallBack"></address-popup>
		</view>
	</public-view>
</template>

<script>
	import pickerView from "@/components/myComponents/pickerView.vue"
	export default {
		components:{
			"address-popup":pickerView
		},
		data() {
			return {
				id:"",
				provinces:{name:""},
				city:{name:""},
				area:{name:""},
				lat:"",
				lng:"",
				name:"",
				mobile:"",
				address_desc:"",
				flag:"default",
				is_post:"",
				item:{}
				
			};
		},
		onLoad(options) {
			this.item = JSON.parse(options.data)
			if(item.id){
				this.item = item
				this.id = item.id
				this.provinces.name = item.province_text
				this.city.name = item.city_text
				this.area.name = item.area_text
				this.lat = item.lat
				this.lng = item.lng
				this.address_desc = item.address_desc
				this.mobile = item.mobile
				this.name = item.name
				this.flag = item.flag
			}else{
				
			}
			console.log(options)
		},
		onShow() {
			if(!!!this.item.id){
				this.getLocationThis()
			}
		},
		methods:{
			getLocationThis(){
				let that = this
				uni.showLoading({
					title:"定位中..."
				})
				that.$location.myGetLocation((res)=>{
					uni.hideLoading()
					that.lng = res.lng
					that.lat = res.lat
					that.$getAreaByCoordinate(that.lng,that.lat,3,false,(res)=>{
						console.log(res)
						that.provinces = res.provinces
						that.city = res.city
						that.area = res.area
					})
				},false)
			},
			getChooseLocation(type){
				let that = this
				that.$location.myGetLocation(res=>{
					console.log(res)
					that.lng = res.longitude
					that.lat = res.latitude
				})
			},
			postAddressAdd(){
				let that = this
				if(that.name === ''){
					uni.showToast({
						title:"请输入收件人姓名",
						icon:"none"
					})
					return
				}
				if(that.mobile === ''){
					uni.showToast({
						title:"请输入收件人电话",
						icon:"none"
					})
					return
				}
				if(that.address_desc === ''){
					uni.showToast({
						title:"请输入收件人详细地址",
						icon:"none"
					})
					return
				}
				let data = {
					lng:that.lng,
					lat:that.lat,
					name:that.name,
					mobile:that.mobile,
					address_desc:that.address_desc,
					flag:that.flag,
				}
				if(this.id){
					data.id = this.id
				}
				if(that.is_post !==""){
					return
				}
				that.is_post = '1'
				uni.showLoading({
					title:"提交中..."
				})
				that.util.postRequest({
					url:"v1/user_address/edit",
					data
				}).then(res=>{
					uni.hideLoading()
					that.is_post = ''
					uni.showToast({
						title:"提交成功"
					},2500)
					let timeout = setTimeout(()=>{
						clearTimeout(timeout)
						uni.navigateBack()
					},2400)
				}).catch(e=>{
					uni.hideLoading()
				})
			},
			addressCallBack(e){
				console.log(e)
			},
			openAddressPicker(){
				this.$refs.addressPopup.show()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.save-address-btn{
		width: 702upx;
		height: 96upx;
		border-radius: 128upx;
		background: #EE8300;
	}
	.tag-list-box{
		width: 100%;
		background: #FFFFFF;
		border-radius: 20upx;
		padding: 32upx;
		margin-bottom: 48upx;
		.item{
			min-width: 184upx;
			height: 64upx;
			border-radius: 16upx;
			font-size: 28upx;
			margin-bottom: 20upx;
		}
		.active{
			background: #FCE6CC;
			color: #060606;
		}
		.unactive{
			background: #F8F9FA;
			color: #666;
		}
	}
	.address-form-box{
		width: 100%;
		background: #FFFFFF;
		border-radius: 20upx;
		padding: 32upx;
		margin-bottom: 22upx;
		.address-input{
			width: 100%;
			padding: 0 42upx;
			background: rgba(143, 146, 161, 0.08);
			border-radius: 20upx;
			line-height: 1;
			height: 96upx;
			margin-bottom: 20rpx;
		}
		.title{
			margin-bottom: 10upx;
		}
	}
	.map-addresss{
		width: 100%;
		background: #FFFFFF;
		border-radius: 20upx;
		padding: 32upx;
		margin-bottom: 20upx;
		.address-pick{
			.next-ic{
				width: 48upx;
				height: 48upx;
			}
			.left{
				.title{
					margin-right: 20upx;
				}
			}
		}
		.map-box{
			width: 626upx;
			height: 196upx;
			margin-bottom: 20upx;
		}
	}
	.content{
		width: 100%;
		padding: 32upx 30upx;
	}
</style>
